import React from 'react';
import { Table } from 'antd';
import { IconFont } from '../../../.././../../components/IconFont';
import { paramsColumns, codeColumns, codeList } from './option';
import FormatValue from '../../../../components/formatValue';
import DetailCard from '../../../../components/detailCard';
import services from '../../../../../../services/api';

const InterfaceDoc = ({ value }) => {
  const downloadPdf = services.debug.downloadPdf(value.id);
  const getDocList = () => [
    {
      label: '接口描述',
      value: value.desc,
    },
    {
      label: '接口地址',
      value: `域名/req/${value.flag}`,
    },
    {
      label: '请求方式',
      value: 'POST & JSON',
    },
    {
      label: '入参说明',
      value: <Table rowKey='id' columns={paramsColumns} dataSource={value.params} pagination={false} />,
    },
    {
      label: '返回格式',
      value: value.returningTypeLabel,
    },
    {
      label: '返回值成功示例',
      value: <FormatValue type={value.returningType} value={value.successExample} />,
    },
    {
      label: '返回值失败示例',
      value: <FormatValue type={value.returningType} value={value.failedExample} />,
    },
    {
      label: '响应码说明',
      value: <Table rowKey='code' columns={codeColumns} dataSource={codeList} pagination={false} />,
      span: 24,
    },
  ];

  return (
    <div className='detail'>
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          marginBottom: '20px',
          background: '#f9fafc',
          padding: '10px 20px',
        }}
      >
        <span>{value.name}</span>
        <a href={downloadPdf}>
          <IconFont
            type='icon-download1'
            className='color-default'
            style={{ fontSize: '16px', marginLeft: '10px', cursor: 'pointer' }}
          />
        </a>
      </div>
      <DetailCard value={getDocList()} horizontal span={24} labelSpan={3} style={{ padding: '20px' }} />
    </div>
  );
};
export default InterfaceDoc;
